<template>
	<view>
		<view style="padding: 20upx 0upx; text-align: center;background-color: #E93B3D;margin-bottom: 30upx;color: #FFFFFF;">
			<view>账户余额（元）</view>
			<view style="font-size: 60upx;margin-top: 20upx;margin-bottom: 10upx;">{{userInfo.BalanceProfits}}</view>
		</view>

		<uni-steps :data="infodata" direction="column" :active="0">
		</uni-steps>
		<button class="add-btn" @click="load">加载更多</button>



	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniSteps from "@/components/uni-steps/uni-steps.vue"
	export default {
		data() {
			return {
				page: 1,
				bottom: 500,
				infodata: []

			}

		},
		computed: {
			...mapState(['token', 'exp_time', 'hasLogin', 'userInfo'])
		},
		onLoad() {

			this.load()

		},
		methods: {

			load() {
				console.log(this.page)

				uni.request({
					url: this.$serverUrl + `/app/balance/change/` + this.userInfo.MemId,
					header: {
						"Content-Type": "application/json",
						"Authorization": this.token
					},
					data: {
						"page_index": this.page,
						"page_size": 20
					},
					method: "POST",
					success: (e) => {
						if (e.data.success) {
							console.log(e.data)


							let data = e.data.data.rows
							let _that = this

							data.forEach(function(value) {
								_that.infodata.push({
									"Type": value.Type,
									"Amount": value.Amount,
									"Date": value.Date,
									"Title": value.Title,
									"Detail": value.Detail




								})
							});


							if (data.length >= 1) {
								_that.page += 1
							}

						} else {
							console.log(e.data.message)
						}
					},
					fail: (e) => {
						console.log(e.errMsg)
					}
				})






			}






		},
		onShow() {




		},
		components: {
			uniSteps
		}
	}
</script>

<style>
	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		color: #fff;
		background-color: #E93B3D;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
